<template>
  <div class="p-[20px_0] module-cont">
    <div v-for="(item, index) in listData" class="moduleItem" @click="checkDetail(item)" :key="index">
      <div class="module-cont-box">
        <div class="content">
          <div class="content-icon">
            <img src="@/assets/images/registerManage/relation_icon.png" alt="" srcset="">
          </div>
          <div class="content-info">
            <div class="title">{{ item.asset_package_name }}</div>
            <div class="info">{{ item.asset_package_desc }}</div>
          </div>
        </div>
        <div class="btn">
          <icon-right />
        </div>
      </div>

    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const listData = ref([
  {
    "asset_package_id": 25,
    "asset_package_code": "ZY10020240701141356",
    "asset_package_version": 2,
    "asset_package_name": "食品菜谱",
    "asset_package_desc": "1"
  },
  {
    "asset_package_id": 23,
    "asset_package_code": "ZY10020240628175420",
    "asset_package_version": 4,
    "asset_package_name": "测试0701",
    "asset_package_desc": "测测测"
  }
])
</script>

<style lang="less" scope>
.module-cont {
  display: flex;
  flex-wrap: wrap;
  margin-top: 24px;

  &-box {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .btn {
      width: 16px;
    }
  }

  .moduleItem {
    width: calc((100% - 40px) / 3);
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    margin-right: 20px;
    border: 1px solid #EBF0FA;
    cursor: pointer;

    &:hover {
      background: #F7F9FC;
    }

    &:nth-child(3n) {
      margin-right: 0;
    }

    .content {
      flex: 1;
      display: flex;

      &-icon {
        width: 48px;
      }

      &-info {
        flex: 1;
        padding-left: 10px;
      }
    }

    img {
      width: 48px;
      height: 48px;
      background: #D9E7FA;
      border-radius: 100%;
    }

    .title {
      font-size: 16px;
      font-weight: bold;
      color: #465A80;
      line-height: 24px;
    }

    .info {
      flex: 1;
      font-size: 14px;
      color: #A3B0CC;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}

:deep(.arco-icon) {
  color: #A3B0CC;
}
</style>